<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>computed 和 methods 的区别</title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="app">
        <h3>顾客你好！</h3>
        <p>
            你购买的手机品牌是{{company}}<br />单价是{{price}}元<br />
            数量是{{count}}部<br />总价是{{total}}元
            <!-- 数量是{{count}}部<br />总价是{{total()}}元 -->
        </p>
        <p>第二次访问总价{{total}}</p>
        <!-- <p>第二次访问总价{{total()}}</p> -->
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app', // 将 Vue 实例挂载到 id 为 'app' 的元素上
            data: {
                company: '华为', // 定义数据：手机品牌
                price: 2000, // 定义数据：手机单价
                count: 10 // 定义数据：购买数量
            },
			//methods 中的方法每次被调用时都会执行其内部的逻辑代码，
			//不会像 computed 那样具有缓存机制。
            // methods: {
            //     total: function() { 
            //         // 在 methods 中定义的 total 方法
            //         console.log('每访问一次就执行一次函数') 
            //         return this.price * this.count; 
            //     },
            // }
			/*
			computed 是计算属性。
			计算属性是基于其依赖的值进行计算，并具有缓存特性。
			这意味着只要计算属性的依赖值没有发生变化，
			多次访问计算属性获取的值都会直接返回之前计算的结果，
			而不会重复执行计算函数，从而提高性能。
			*/
            computed: {
                total: function() { 
                    // 在 computed 中定义的 total 计算属性
                    console.log('初始化或依赖的数据改变时执行函数')
                    return this.price * this.count; 
                },
            },
			/*
			computed（计算属性）和 methods（方法）在 Vue 中有以下几个主要区别：
			缓存机制：
			computed 具有缓存特性。只要其依赖的数据未发生变化，多次访问计算属性的值时，不会重复执行计算函数，而是直接返回之前计算的结果。
			methods 没有缓存。每次调用方法都会重新执行函数内的逻辑。
			执行时机：
			computed 仅在其依赖的数据发生变化时重新计算值。
			methods 在每次被调用时都会执行。
			调用方式：
			在模板中，computed 像普通属性一样使用，即直接通过 {{ computedProperty }} 来获取值。
			methods 需要通过 {{ method() }} 的方式调用，即在方法名后面加上括号。
			性能消耗：
			由于 computed 的缓存机制，在依赖数据不变的情况下，性能消耗相对较小。
			methods 每次调用都执行函数，可能会在频繁调用时产生更多的性能开销。
			*/
        })
    </script>
	
</body>
</html>